<template>
	<view class="container-box">
		<!-- <view class="head-tabs">
			<u-tabs :list="tabList" @click="tabClick"></u-tabs>
		</view> -->
		<view class="head-tabs" id='headerTabs'>
			<!-- background: #f6f6f6; -->
			<view class="tabs-item" :class="[i===(index-4)?'tabs-item-active':'']" v-for='(item,i) in tabList'
				:key='item.name' @click="tabClick(i)">
				{{item.name}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower"
			:style="{height:'calc( 100vh - '+surplusHeight+'px - '+headerTabs+'px )'}">
			<view class="content-box">
				<view class="item-box-dy" v-for="item in listArr" :key="item.id" @click="hairCommunityClick(item)">
					<view class="right-box">
						<view class="tilte-top" style="display: flex; align-items: center">
							<view class="d-text-w">问</view>
							<view class="title-w">{{ item.question }}</view>
						</view>
						<view class="tilte-center">
							<view class="title-p">
								<text class="d-text-d">答</text>{{item.introduction?item.introduction:''}}
								<!-- <rich-text :nodes='ellipsis(item.answer) '></rich-text> -->
							</view>
						</view>
						<view class="title-bottom">
							<view class="title-bottom-icon">
								<u-icon size="20" name="chat"></u-icon><text>{{ item.commentQuantity }}</text>
							</view>
							<view v-if="item.isLike == 'Y'" class="title-bottom-icon">
								<u-icon color="#e45656" size="20"
									name="heart-fill"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
							<view v-else class="title-bottom-icon">
								<u-icon name="heart" size="20"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="status!=='nomore'" :status="status" />
			</view>
		</scroll-view>
		<!-- <scroll-view style="height:calc( 100vh - 220px )" scroll-y="true" class="scroll-Y"
				@scrolltolower="scrolltolower">
				<view class="item-box" v-for="item in listArr" :key="item.id" @click="hairCommunityClick(item)">
					<img :src="item.image?item.image:baseUrl+'/static/error.png'" alt="" />
					<view class="right-box">
						<view class="tilte-top">{{item.question}}</view>
						<view class="tilte-center">{{item.answer}}</view>
						<view class="title-bottom">
							<view style="display: flex; font-size: 20rpx; margin-right: 20rpx"><u-icon
									name="chat"></u-icon><text>{{item.commentQuantity}}</text>
							</view>
							<view style="display: flex; font-size: 20rpx"><u-icon
									name="heart"></u-icon><text>{{item.likeQuantity}}</text></view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</scroll-view> -->
	</view>
</template>

<script>
	import {
		questionsOrScience
	} from "@/api/axios/HairCommunity.js";
	// import store from "../../../store";
	export default {
		props: {
			surplusHeight: {
				require: true,
				type: String,
			},
			openId: {
				require: true,
				type: String,
			},
			tabList: {
				require: true,
				type: Array,
			},
		},

		data() {
			return {
				listArr: [],
				index: 4,
				pageNo: 1,
				pageSize: 20,
				status: "loadmore", //loadmore/loading / nomore
				menuHeight: '',
				headerTabs: 0
			};
		},
		methods: {
			ellipsis(value) {
				value = value.replace(/<.*?>/ig, "") //把v-html的格式标签替换掉
				if (value.length > 50) {
					return value.slice(0, 50) + "...";
				} else {
					return value
				};
			},
			scrolltolower() {
				let _this = this;
				if (this.status !== "nomore" && this.status !== "loading") {
					this.status = "loading";
					questionsOrScience({
						params: {
							openId: this.openId,
							type: 2,
							category: this.index,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
						},
					}).then((res) => {
						_this.listArr = _this.listArr.concat(res.records);
						if (res.records.length < _this.pageSize) {
							_this.status = "nomore";
						} else {
							_this.pageNo = _this.pageNo + 1;
							_this.status = "loadmore";
						}
						console.log(_this.status);
					});
				}
			},
			tabClick(index) {
				this.listArr = [];
				this.index = index + 4;
				this.pageNo = 1;
				this.init();
			},
			hairCommunityClick(data) {
				let obj = {
					...data,
				};

				uni.navigateTo({
					url: "/pages/HairCommunityDetail/index?id=" +
						data.id +
						"&isLike=" +
						data.isLike +
						"&isFavorite=" +
						data.isFavorite,
				});
			},
			init(index) {
				let _this = this;

				this.status = "loading";
				questionsOrScience({
					params: {
						openId: this.openId,
						type: 2,
						category: this.index,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
					},
				}).then((res) => {
					_this.listArr = _this.listArr.concat(res.records);
					if (res.records.length < _this.pageSize) {
						_this.status = "nomore";
					} else {
						_this.pageNo = _this.pageNo + 1;
						_this.status = "loadmore";
					}
				});
			},
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select("#headerTabs")
				.boundingClientRect((data) => {
					this.headerTabs = data.height
				})
				.exec();


			let res = uni.getSystemInfoSync();
			let menu = wx.getMenuButtonBoundingClientRect();
			let systemBarHeight =
				(menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;
			if (res.model.indexOf("iPhone") > -1) {
				systemBarHeight += 4;
			}
			this.menuHeight = res.statusBarHeight + 200
			this.init();




		},
	};
</script>

<style lang="scss">
	@import "./index.scss";
</style>